<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-form :model="formData" size="small" label-width="120px">
          <el-form-item label="标题" prop="title">
            <el-input v-model="formData.title"/>
          </el-form-item>
          <el-form-item label="内容">
            <el-input type="textarea" :raws="4" v-model="formData.content"/>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker type="datetime" v-model="formData.moment" value-format="yyyy-MM-dd HH:mm:ss"/>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <div style="height: 100%; border: solid black 1px;"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-row :span="6">
        <el-radio-group v-model="requestParams.method" size="small">
          <el-radio label="get" border>GET</el-radio>
          <el-radio label="post" border>POST</el-radio>
        </el-radio-group>
      </el-row>
      <el-row :span="6">
        <el-radio-group v-model="requestParams.contentType" size="small">
          <el-radio label="form" border>xxx-form-urlparams</el-radio>
          <el-radio label="formData" border>form-data</el-radio>
          <el-radio label="json" border>json</el-radio>
        </el-radio-group>
      </el-row>
      <el-row :span="6">
        <el-radio-group v-model="requestParams.receive" size="small">
          <el-radio label="params" border>Params</el-radio>
          <el-radio label="entity" border>Entity</el-radio>
          <el-radio label="body" border>Body</el-radio>
        </el-radio-group>
      </el-row>
      <el-row :span="6"></el-row>
    </el-row>
    <el-row>
      <el-col :span="24">
        <button @click="fetchEventStream">开始</button>
        <button @click="fluxText = ''">清空</button>
      </el-col>
      <el-col :span="24">
        <div style="white-space: pre-wrap">{{ fluxText }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'AjaxTest',
  data () {
    return {
      fluxText: '',
      formData: {
        title: '',
        moment: '',
        content: ''
      },
      requestParams: {
        method: 'get',
        contentType: '',
        receive: ''
      },
      responseMsg: 'AjaxTest'
    }
  },
  mounted () {
    /* console.log(Qs.stringify({}, {
      allowDots: true,
      arrayFormat: 'indices'
    }))
    this.$http.postUrlEncode('/test/ajax/postForm', {
      paramsList: ['123', '456']
    }) */
  },
  methods: {
    sendRequest () {

    },

    eventStream () {
      const eventSource = new EventSource('/api/test/test4')
      eventSource.onmessage = (event) => {
        console.log(event)
        this.fluxText += event.data
      }
      eventSource.onerror = (error) => {
        console.log(error)
        eventSource.close()
      }
    }
  }
}
</script>

<style scoped>

</style>
